<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1.1.1.position</title>
		<style>
			#div01{
				position:absolute;
				left:20px;
				top:180px;
				height:300px;
				width:800px;
				border: solid thin red;
				color : red;
			}
			#div1{
				position:static;
				left:30px;
				top:150px;
				height:100px;
				width:500px;
				border: solid thin blue;
				color : blue;
			}
			.div3{
				--position:static;
				height:35px;
				width:330px;
				border: solid thin deeppink;
				--color : blue;
				background-color: cyan;
			}
			.div4{
				border: solid thin blue;
				color : blue;
				width:150px;
			}
			.div5{
				border: solid thin blue;
				color : blue;
				width:150px;
			}
			
			#span_mark1{
				position:absolute;
				top:500px;
			}
			
			#div02{
				position:absolute;
				left:20px;
				top:530px;
				height:300px;
				width:800px;
				border: solid thin green;
				color : green;
				--text-align: right;
			}
			#div6{
				position:relative;
				--left:30px;
				--top:30px;
				height:100px;
				width:500px;
				bottom:-30px;
				right:-30px;
				border: solid thin blue;
				color : blue;
			}
			
			#span_mark2{
				position:absolute;
				top:850px;
			}
			#div03{
				position:absolute;
				left:20px;
				top:900px;
				height:300px;
				width:800px;
				border: solid thin green;
				color : green;
				--text-align: right;
			}
			#div8{
				position:fixed;
				left:30px;
				top:30px;
				--height:100px;
				--width:500px;
				bottom:50px;
				right:50px;
				border: solid thin blue;
				color : blue;
			}
			
			#span_mark3{
				position:absolute;
				top:1200px;
			}
		</style>
	</head>
	<body>
		语法：<br>
		position：static | relative | absolute | fixed<br>
		默认值：static<br>
		static： 无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。<br> 
		relative： 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。 <br>
		absolute： 对象脱离正常文档流，以相对于父组件的top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。<br> 
		fixed： 对象脱离正常文档流，使用top，right，bottom，left等属性以窗口window为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值 <br>
		<div id="div01">
			主框div01, position:absolute;top:180px;
			<div id="div1">
				div01里的div1,不设position，等于static，对象遵循正常文档流。<br>
				top，right，bottom，left等属性不会被应用。<br>
			</div>
			<div id="div2" style="border:solid thin black">
				div01里的div2,没有样式class(只设了style=border:solid thin black)。<br>
				字体样式继承父元素的样式。
			</div>
			<div id="div3" class="div3">
				div01里的div3, class=div3。<br>
				前景色继承父元素的样式值,内容可能溢出。
			</div>
			<div id="div4" class="div4">
				div01里的div4。width:100px<br>
			</div>
			<div id="div5" class="div5">
				div01里的div5。width:100px<br>
			</div>
		</div>
		<bar>
		<span id="span_mark1">span主框div01下面span, position:absolute;top:500px;</span>
		
		<div id="div02">
			主框div02, position:absolute;top:530px;
			<div id="div6">
				div01里的div6,position:relative。<br>
				遵循正常文档流，但top，right，bottom，left等属性起作用。<br>
				但是是以左上角为准的，right = -left, bottom = -top。<br>
				并不是按右下方为起点。<br>
			</div>
			<div id="div7" style="border:solid thin black">
				div02里的div7,没有样式class(只设了style=border:solid thin black)。<br>
				字体样式继承父元素的样式。
			</div>
		</div>
		<span id="span_mark2">span主框div02下面span, position:absolute;top:850px;</span>
		<div id="div03">
			主框div03, position:absolute;top:850px;
			<div id="div8">
				div03里的div8,position:relative。<br>
				对象脱离正常文档流<br>
				使用top，right，bottom，left等属性以窗口(浏览器客户区)为参考点进行定位，<br>
				当出现滚动条时，对象不会随着滚动。。<br>
				并不是按父元素为相对位置的。<br>
			</div>
			<div id="div9" style="border:solid thin black">
				div03里的div9,没有样式class(只设了style=border:solid thin black)。<br>
				字体样式继承父元素的样式。
			</div>
		</div>
		<span id="span_mark3">span主框div03下面span, position:absolute;top:1200px;</span>
		
	</body>
</html>
